<template>
	<view>
		<view class="compos">
			<view class="base-btn" @click="show = !show">
				<slot>
					<view class="text">筛选</view>
					<view class="icon">
						<image src="../../static/icon/xuan.png"></image>
					</view>
				</slot>
			</view>

			<view class="modal" 
				:style="{ 
					height: show ? btnList.length * 7 + 'vw' : 0, 
					overflow: show ? '' : 'hidden', 
					width: 'max',
					top: modalTopPos,
					left: modalLeftPos,
					opacity: modalOpacity
				}"
			>
				<view class="modal-ang" v-if="dotShow && btnList.length > 0" :style="direction !== 'left' ? 'left: 10px': 'right: 10px'"></view>
				<view class="modal-item" :class="currentIndex == index ? 'active' : ''" v-for="(item, index) in btnList" :index="index" :key="index" @tap="callRes(index)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * :btnList				按钮列表
	 * :btnStyle			外部按钮样式
	 * :modalWidth			弹出层宽度
	 * :modalLeftPos		弹出层左定位
	 * :modalTopPos			弹出层顶定位
	 * :modalOpacity		弹出层透明度
	 * :direction			弹出层箭头位置 left right
	 * :active				默认激活状态
	 * @select				选中列表触发事件
	 * */
	
	
export default {
	data() {
		return {
			show: this.active,
			dotShow: this.active,
			currentIndex: 0
		};
	},
	watch: {
		show() {
			setTimeout(() => {
				this.dotShow = this.show;
			}, 50);
		},
		active() {
			this.show = this.active
		}
	},
	props: {
		btnList: {
			type: Array,
			default: () => {
				return [];
			}
		},
		// btnStyle: {
		// 	type: Object,
		// 	default: () => {
		// 		return {};
		// 	}
		// },
		modalWidth: {
			type: String,
			default: '158upx'
		},
		modalLeftPos: {
			type: String,
			default: '5vw'
		},
		modalTopPos: {
			type: String,
			default: '6vw'
		},
		modalOpacity: {
			type: String,
			default: '1'
		},
		direction: {
			type: String,
			default: 'left'
		},
		active: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		callRes(e) {
			this.currentIndex = e
			this.$emit('select', e);
			this.show=false;
			this.dotShow=false;
		}
	}
};
</script>

<style lang="scss">
.compos {
	position: relative;
	margin-left: 100rpx;
	.modal {
		// width: 168upx!important;
		left: -90rpx!important;
		top: 54upx!important;
		background-color: #fff;
		position: absolute;
		border-radius: 1vw;
		transition: height ease-out 100ms;
		z-index: 999;
		box-shadow: 0px 1rpx 8rpx 0px #D5D5D5;
		.modal-item {
			width: max-content;
			padding-left: 15rpx;
			height: 7vw;
			line-height: 7vw;
			color: #666;
			font-size: 26rpx;
			text-align: left;
			border-bottom: 1px solid #f5f5f5;
			margin-left: 2px;
			margin-right: 2px;
		}

		.modal-item:last-child {
			border-bottom: none;
		}

		.modal-ang {
			background-color: #fff;
			position: absolute;
			border-top: 2upx solid #ccc;
			border-left: 2upx solid #ccc;
			width: 11px;
			height: 11px;
			transform: rotate(45deg);
			top: -12upx;
			right: 32upx!important;
			border-radius: 3px;
		}
	}
	.active {
		color: $theme-color!important;
	}
}

.base-btn {
	position: relative;
	border: 0upx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	.text {
		color: $theme-color;
		font-size: 28upx;
	}
	.icon {
		width: 26upx!important;
		height: 26upx!important;
		position: absolute;
		top: -2upx;
		left: 62upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
